<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册Seeker账号</title>
    <c:set value="${pageContext.request.contextPath}" var="path"/>
    <link rel="icon" href="${path}/LeisureSeeker/icons/favicon.ico" sizes="16x16"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <%--<script src="js/jquery-3.3.1.min.js"></script>--%>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script
            src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          rel="stylesheet">

    <%--<link rel="stylesheet" type="text/css"--%>
    <%--href="${pageContext.request.contextPath}/LeisureSeeker/frontcss/css/styles.css">--%>
    <link rel="stylesheet" href="${path}/LeisureSeeker/frontcss/css/jigsaw.css">
    <link rel="stylesheet"
          href="${path}/LeisureSeeker/css/ylj.css">
    <style>
        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }

        .reg-login-header {
            height: 90px;
            /*background-color: #00F7DE;*/
        }

        .logobox {
            height: 49px;
        }

        .form-horizontal .has-feedback .form-control-feedback {
            right: 0px;
            /*top: 21px;*/
        }

        .input-box-width {
            width: 300px;
            margin-bottom: 5px;
        }

        .notify-str {
            font-weight: 500;
            margin-bottom: 0px;
            font-size: 14px;
        }

        #loginpwd {
            display: inline-block;
        }
    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
<div class="container">

    <div class="w1200 reg-login-header" style="border-bottom: 1px solid rgba(174,174,174,0.26);">
        <%--<div class="snav">--%>
        <%--<div class="w1200">--%>
        <a class="logobox" href="${path}/home" title="舒客Seeker--旅行，旅居，旅友" style="margin-top: 25px">
            <strong style="line-height: 49px">舒客
                <span>Seeker</span>
                <span style="border-left: 1px solid rgba(85,0,87,0.6);margin-left: 10px;padding-left: 16px">注册账号</span>
            </strong>
            <img src="${path}/LeisureSeeker/icons/favicon_128x128.png" style="width: 49px;height: 49px">
            <%--<span>旅行&nbsp;&sdot;&nbsp;旅居&nbsp;&sdot;&nbsp;旅友</span>--%>
        </a>
        <span class="fright login" id="login-btn" style="margin-top: 35px;margin-right: 25px">
            我已注册，现在就
            <a href="${path}/userapi/tofrontlogin/login"
               id="Login_start" class="btn btn-default">登录</a>
        </span>
        <%--</div>--%>
        <%--</div>--%>
    </div>
    <div class="row clearfix" style="margin-top: 120px;padding-left: 60%">
        <%--has-success控制颜色--%>
        <%--glyphicon-ok控制对错--%>
        <div class="col-md-6 column" style="margin-left: 7%">
            <!--表单控件-->
            <form class="form-horizontal" role="form" action="" target="_blank">

                <div class="form-group has-feedback input-box-width" id="success-error">
                    <label id="name-exist" class="control-label notify-str" for="loginname"
                           style="opacity: 0">手机号码格式有误</label>
                    <input type="text" class="form-control" name="username" id="loginname"
                           aria-describedby="inputError2Status"
                           placeholder="请输入手机号码">
                    <span id="username-check" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <%--<span id="inputError21Status1" class="sr-only">(error)</span>--%>
                </div>
                <!--密码-->
                <div class="form-group has-feedback input-box-width" id="code-error">
                    <label id="pwd-exist" class="control-label notify-str" for="loginpwd"
                           style="opacity: 0">验证码有误</label>
                    <div>
                        <input type="text" class="form-control" name="password" id="loginpwd"
                               aria-describedby="inputSuccess2Status" placeholder="请输入验证码"
                               style="width: 150px"/>
                        <button class="btn btn-success" id="code-btn" name="btn"
                                style="width: 135px;float: right" disabled="disabled">发送验证码
                        </button>
                    </div>
                    <span id="pwd-check" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                    <%--<span id="inputSuccess2Status" class="sr-only">(success)</span>--%>
                </div>
                <div class="form-group" style="margin-bottom: -10px">
                    <div class="col-sm-offset-2 col-sm-10 form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="quick-login" checked="checked"/>注册后立即登录
                            </label>
                        </div>
                    </div>
                </div>

                <!--登录按钮-->
                <div class="form-group">
                    <%--<div class="col-sm-offset-2 col-sm-10">--%>
                    <input id="register" type="button" class="btn btn-info input-box-width" value="注册"
                           disabled="disabled"/>
                    <%--</div>--%>
                </div>
            </form>
        </div>

    </div>
</div>

<script src="${path}/LeisureSeeker/frontcss/js/jigsaw.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- szh注册框失焦事件 -->
<script>
    $(function () {
        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount = 0;//当前剩余秒数
        $(function () {
            $('#code-btn').click(function () {
                curCount = count;
                $("#code-btn").attr("disabled", "true");
                $("#code-btn").text(curCount + "秒后可重新发送");
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码
            });
        });

        // timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#code-btn").removeAttr("disabled");//启用按钮
                $("#code-btn").text("发送验证码");
            } else {
                curCount--;
                $("#code-btn").text(curCount + "秒后可重新发送");
            }
        }

        // 手机框失焦事件
        $("#loginname").change(function () {
            $.ajax({
                url: "${path}/login/tel",
                type: "GET",
                data: {
                    //将获取的文本框内容封装成user对象传过去校验
                    "tel": $("#loginname").val(),
                },
                success: function (data) {
                    <%--has-success控制颜色--%>
                    <%--glyphicon-ok控制对错--%>
                    if (data.msg == "手机号格式不正确") {
                        $('#username-check').addClass("glyphicon-remove");
                        $('#success-error').addClass("has-error");
                        $('#name-exist').text("手机号格式不正确");
                        $('#name-exist').css("opacity", "1");
                        $("#code-btn").attr("disabled", "true");
                        $("#register").attr("disabled", "true");
                        //$("#myform")[0].reset();//重新设置表单内容，清空了
                    } else if (data.msg == "该手机号已被注册") {
                        $('#username-check').addClass("glyphicon-remove");
                        $('#success-error').addClass("has-error");
                        $('#name-exist').text("该手机号已被注册");
                        $('#name-exist').css("opacity", "1");
                        $("#code-btn").attr("disabled", "true");
                        $("#register").attr("disabled", "true");
                    } else {
                        if (curCount == 0) {
                            $("#code-btn").removeAttr("disabled");
                        }
                        $("#register").removeAttr("disabled");
                        $('#username-check').removeClass("glyphicon-remove");
                        $('#username-check').addClass("glyphicon-ok");
                        $('#success-error').removeClass("has-error");
                        $('#success-error').addClass("has-success");
                        $('#name-exist').css("opacity", "0");
                    }
                }
            });
        });
        var code = "";
        // 发送验证码，获取到之后存起来
        $('#code-btn').click(function () {
            $.ajax({
                url: "${path}/login/tel/" + $("#loginname").val(),
                type: "GET",
                success: function (data) {
                    code = data.msg;
                }
            });
        });
        // 注册按钮点击事件
        $('#register').click(function () {
            if ($('#loginpwd').val() == "") {
                $('#code-error').addClass("has-error");
                $('#pwd-exist').text("验证码不能为空");
                $('#pwd-exist').css("opacity", "1");
            } else if ($('#loginpwd').val() != code) {
                // 显示x图标
                // $('#pwd-check').addClass("glyphicon-remove");
                // 显示颜色
                $('#code-error').addClass("has-error");
                $('#pwd-exist').text("验证码有误");
                $('#pwd-exist').css("opacity", "1");
            } else {
                // alert($("#loginname").val());
                var status = $('#quick-login').is(":checked") ? 1 : 0;
                $.ajax({
                    url: "${path}/login/telRegister",
                    type: "PUT",
                    data: {
                        "tel": $("#loginname").val(),
                        "status": status
                    },
                    success: function (data) {
                        // alert(data.msg);
                        if (data.msg == "注册成功") {
                            location.href = "${path}/userapi/tofrontlogin/login";
                        } else if (data.msg == "注册成功并登录") {
                            location.href = "${path}/home";
                        }
                    }
                });
            }

        });
    })
</script>
</body>
</html>